<template> 


	<div class="profile"> 
        <header class="header">
        	<a href="javascript:;" class="header_title">
        		<span class="header_title_text">我的</span>
        	</a>
        </header> 

        <section class="profile-number">
        	<a href="javascript:;" class="profile-link">
        		<div class="profile-image">
        			<i class="iconfont icon-shenfenzheng"></i>
        		</div>
        		<div class="user-info">

        			<p class="user-info-top">登录/注册</p>
        			<p class="user-info-bottom">
        				<span class="user-icon">
        					<i class="iconfont icon-mobilephone"></i>
        				</span>
        				<span class="icon-mobile-number">暂无绑定手机号</span>
        			</p>

        		</div>
        		<span class="arrow">
        			<i class="iconfont icon-right"></i>
        		</span>
        	</a>
        </section>

        <section class="profile_info_data">
        	 <ul class="info-data-list">
	        	 	<li class="info-data-li">

	        	 		<a href="javascript:;" class="info-data-link">
	        	 			<span class="info-data-top info-our">
	        	 				<span>0.00</span>元
	        	 			</span>
	        	 			<span class="info-data-bottom info-our">我的余额</span>
	        	 		</a>


	        	 	</li>
	        	 	<li class="info-data-li">

	        	 		<a href="javascript:;" class="info-data-link">
	        	 			<span class="info-data-top info-our">
	        	 				<span>0</span>个
	        	 			</span>
	        	 			<span class="info-data-bottom info-our">我的优惠</span>
	        	 		</a>

	        	 	</li>
	        	 	<li class="info-data-li">

	        	 		<a href="javascript:;" class="info-data-link">
	        	 			<span class="info-data-top info-our">
	        	 			  <span>0</span>分
	        	 			</span>
	        	 			<span class="info-data-bottom info-our">我的积分</span>
	        	 		</a>

	        	 	</li>
        	 </ul>
        </section>  

        <section class="profile_my_order">

        	<a href="javascript:;" class="my_order">
        		<span class="order_icon">
        			 <i class="iconfont icon-ico_getiaozhongxin_xiaoshoukaidan"></i>
        		</span>
        		<div class="my_order_div">
        			 <span>我的订单</span>
        			 <span class="my_order_icon">
        			 	  <i class="iconfont icon-right"></i>
        			 </span>
        		</div>
        	</a>





        	<a href="javascript:;" class="my_order">
        		<span class="order_icon">
        			<i class="iconfont icon-shangcheng_"></i>
        		</span>
        			<div class="my_order_div">
        			 <span>积分商城</span>
        			 <span class="my_order_icon">
        			 	  <i class="iconfont icon-right"></i>
        			 </span>
        		</div>
        	</a>
        	<a href="javascript:;" class="my_order">
        		<span class="order_icon">
        			 <i class="iconfont icon-jiangbei-"></i>
        		</span>
        			<div class="my_order_div">
        			 <span>站酷外卖会员</span>
        			 <span class="my_order_icon">
        			 	  <i class="iconfont icon-right"></i>
        			 </span>
        		</div>
        	</a>

        </section> 

        <section class="profile_my_order">

        	<a href="javascript:;" class="my_order">
        		<span class="order_icon">
        			 <i class="iconfont icon-library"></i>
        		</span>
        		<div class="my_order_div">
        			 <span>服务中心</span>
        			 <span class="my_order_icon">
        			 	  <i class="iconfont icon-right"></i>
        			 </span>
        		</div>
        	</a>





        	
        	

        </section> 
	</div> 

</template> 


<script> 


export default {

  name: '', 
  components: { } 


} 


</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.sty";
@import "../../static/css/reset.css";
.profile
	width 100%
	.header
		width 100%
		position fixed
		left 0px
		top 0px
		z-index 5555
		.header_title
			height 45px
			background-color #02a774
			display block
			font-size 20px
			text-align center
			line-height 45px
			.header_title_text
				color #fff
				
	.profile-number
		width 100%
		margin-top 45.5px
		.profile-link
			display block
			clearFix()
			background-color #02a774
			position relative
			padding 20px 10px
			.profile-image
				float left
				width 60px
				height 60px
				border-radius 50%
				overflow hidden
				vertical-align top
				.icon-shenfenzheng
					font-size 62px
					color #e4e4e4
			.user-info
				float left
				margin-left 15px
				margin-top 8px	
				>p
					color #fff
					font-weight 700
					font-size 18px
					&.user-info-top
						padding-bottom 8px
					&.user-info-bottom
						.user-icon
							display inline-block
							width 20px
							height 20px
							margin-left -15px
							margin-right 5px
							.icon-mobilephone
								font-size 30px
								vertical-align text-top
						.icon-mobile-number
							font-size 13px
							color #fff
			.arrow
				width 12px
				height 12px
				position absolute
				right 15px
				top 40%
				.icon-right
					color #fff
					font-size 5px
  .profile_info_data
	  width 100% 
	  bottom-border-1px(#e4e4e4)
	  .info-data-list
			width 100%
			display flex
			justify-content space-around
			.info-data-li
				flex 30%
				border-right 1px solid #f1f1f1
				&:last-child
					border-right none
				.info-data-link
					width 100%
					display block
					background #fff
					padding 10px 0px
					display flex
					flex-direction column
					align-itmes center
					.info-our
						flex 1
						text-align center
						color #666
						padding 5px 0 5px
						font-size 14px
						font-weight 400
						span
							color #f90
							font-size 30px
							font-weight 700
							line-height 30px
						&.info-data-bottom
							padding-bottom 10px
.profile_my_order
	margin-top 10px
	top-border-1px(#e4e4e4)
	width 100%
	background #fff
	.my_order
		display flex
		align-items center
		padding-left 15px
		>span
			width 20px
			height 20px
			display flex
			align-items center
			>.iconfont
				margin-left -10px
				font-size 30px
			.icon-ico_getiaozhongxin_xiaoshoukaidan
				color #02a774	
			.icon-shangcheng_
				color #ff5f3e
			.icon-jiangbei-
				color #f90	
			.icon-library
				color #02a774	
		.my_order_div
			padding 18px 10px 18px 0px
			width 100%		
			color #333
			font-size 16px
			border-bottom 1px solid #f1f1f1
			display flex
			justify-content space-between
			span 
				display block
			.my_order_icon
				width 10px
				height 10px
				.icon-right
					font-size 10px
					color #bbb








							






	  	



	  

	  

	  	

  		
  
  	
  		


							
								










	

</style>